import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  ScrollView,
  Image,
  ImageBackground, 
  Button
} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import { navigate } from '@/utils/navigation';
import { useDispatch } from 'react-redux';
import { setToken } from '@/stores/features/userSlice';

export default function Login() {
  const dispatch = useDispatch();
  const handleLogin = () => {
    // 模拟登录成功
    const mockToken = 'mock_token_' + Date.now();
    dispatch(setToken(mockToken));
    navigate('/home');
  };

  return (
    <SafeAreaView>
      <ScrollView className='bg-[#F4F4F5]'>
        <ImageBackground source={require('@/assets/images/auth/bg.png')}>
          <View className="pt-[202px] px-[24px] relative flex-1 ">
            <Image
              source={require('@/assets/images/auth/logo.png')}
              className="w-[160px] h-[36px] mb-[10px]"
            />
            <Text className='text-[32px] text-[#FBAA19] font-bold'>สินเชื่อพร้อมใช้</Text>
            <Text className='text-[32px] text-[#626366] font-bold'>คู่ใจใกล้คุณ</Text>
            <Text className='text-[32px] text-[#626366] font-thai font-bold'>คู่ใจใกล้คุณ</Text>
            <View className='mt-2'>
              <Text className='font-thai'>สินเชื่อออนไลน์รวดเร็ว เชื่อถือได้</Text>
              <Text>มอบความช่วยเหลือทางการเงิน</Text>
              <Text>สำหรับทุกคนในเมืองไทย</Text>
            </View>
            <View className="mt-2 text-[16px] text-[#626366] flex flex-row items-center jus gap-1">
              <Text className="w-[4px] h-[18px] rounded-t-[2px] rounded-br-[10px] bg-[#FBAA19] inline-block"></Text>
              <Text>เบอร์โทรศัพท์</Text>
            </View>
            <View>
              <Text>我是测试字体 เบอร์โทรศัพท์ thai</Text>
              <Text className='font-thai'>我是测试字体 เบอร์โทรศัพท์ thai</Text>
            </View>
            <View>
              <Text>我是测试字体 เบอร์โทรศัพท์ din</Text>
              <Text className='font-din'>我是测试字体 เบอร์โทรศัพท์ din</Text>
            </View>
            <View>
              <Text>我是测试字体 เบอร์โทรศัพท์ roboto</Text>
              <Text className='font-roboto'>我是测试字体 เบอร์โทรศัพท์ roboto</Text>
            </View>
            <View>
              <Text>我是测试字体 เบอร์โทรศัพท์ roboto-medium</Text>
              <Text className='font-roboto-medium'>我是测试字体 เบอร์โทรศัพท์ roboto-medium</Text>
            </View>
            <View>
              <Text>我是测试字体 เบอร์โทรศัพท์ roboto-regular</Text>
              <Text className='font-roboto-regular'>我是测试字体 เบอร์โทรศัพท์ roboto-regular</Text>
            </View>
            <View className='mt-4'>
              <Button title="去登陆" onPress={handleLogin}></Button>
            </View>
          </View>
        </ImageBackground>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F4F4F5',
  },
});
